<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息功能测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
        }
        .test-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #667eea;
        }
        .test-form {
            display: grid;
            gap: 15px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
        }
        .form-group label {
            margin-bottom: 5px;
            font-weight: 500;
            color: #333;
        }
        .form-group input, .form-group select {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        }
        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .checkbox-item input[type="checkbox"] {
            width: auto;
        }
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-primary {
            background-color: #667eea;
            color: white;
        }
        .btn-primary:hover {
            background-color: #5a6fd8;
        }
        .btn-secondary {
            background-color: #f8f9fa;
            color: #666;
            border: 1px solid #ddd;
        }
        .btn-secondary:hover {
            background-color: #e9ecef;
        }
        .result-area {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid #667eea;
        }
        .result-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .result-content {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #666;
            white-space: pre-wrap;
        }
        .status {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            margin-left: 10px;
        }
        .status.success {
            background-color: #d4edda;
            color: #155724;
        }
        .status.error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .status.loading {
            background-color: #fff3cd;
            color: #856404;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎯 个人信息功能测试</h1>
            <p>华南师范大学VR展馆预约系统 - 前端个人信息模块测试</p>
        </div>

        <!-- 服务器连接测试 -->
        <div class="test-section">
            <div class="test-title">📡 服务器连接测试</div>
            <button class="btn btn-primary" onclick="testConnection()">测试连接</button>
            <span id="connectionStatus"></span>
            <div id="connectionResult" class="result-area" style="display: none;">
                <div class="result-title">连接结果</div>
                <div id="connectionContent" class="result-content"></div>
            </div>
        </div>

        <!-- 手机号快速检查 -->
        <div class="test-section">
            <div class="test-title">📱 手机号检查测试</div>
            <div class="form-group">
                <label for="phoneCheck">手机号：</label>
                <input type="tel" id="phoneCheck" placeholder="输入手机号进行检查" maxlength="11">
            </div>
            <button class="btn btn-primary" onclick="checkPhone()">检查手机号</button>
            <span id="phoneCheckStatus"></span>
            <div id="phoneCheckResult" class="result-area" style="display: none;">
                <div class="result-title">检查结果</div>
                <div id="phoneCheckContent" class="result-content"></div>
            </div>
        </div>

        <!-- 个人信息表单测试 -->
        <div class="test-section">
            <div class="test-title">📝 个人信息保存测试</div>
            <form class="test-form" onsubmit="savePersonalInfo(event)">
                <div class="form-group">
                    <label for="name">姓名 *</label>
                    <input type="text" id="name" required maxlength="20" placeholder="请输入真实姓名">
                </div>
                
                <div class="form-group">
                    <label for="phone">联系电话 *</label>
                    <input type="tel" id="phone" required maxlength="11" placeholder="请输入联系电话">
                </div>
                
                <div class="form-group">
                    <label for="gender">性别 *</label>
                    <select id="gender" required>
                        <option value="">请选择性别</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="age">年龄 *</label>
                    <input type="number" id="age" required min="1" max="120" placeholder="请输入年龄">
                </div>
                
                <div class="form-group">
                    <label for="education">教育程度 *</label>
                    <select id="education" required>
                        <option value="">请选择教育程度</option>
                        <option value="小学">小学</option>
                        <option value="初中">初中</option>
                        <option value="高中/中专">高中/中专</option>
                        <option value="大专">大专</option>
                        <option value="本科">本科</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="occupation">职业 *</label>
                    <input type="text" id="occupation" required maxlength="50" placeholder="请输入职业">
                </div>
                
                <div class="form-group">
                    <label for="religion">宗教信仰</label>
                    <select id="religion">
                        <option value="无">无</option>
                        <option value="佛教">佛教</option>
                        <option value="基督教">基督教</option>
                        <option value="天主教">天主教</option>
                        <option value="伊斯兰教">伊斯兰教</option>
                        <option value="道教">道教</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>掌握语种</label>
                    <div class="checkbox-group" id="languagesGroup">
                        <div class="checkbox-item">
                            <input type="checkbox" id="lang_english" value="英语">
                            <label for="lang_english">英语</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="lang_japanese" value="日语">
                            <label for="lang_japanese">日语</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="lang_korean" value="韩语">
                            <label for="lang_korean">韩语</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="lang_french" value="法语">
                            <label for="lang_french">法语</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="lang_german" value="德语">
                            <label for="lang_german">德语</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="lang_spanish" value="西班牙语">
                            <label for="lang_spanish">西班牙语</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="lang_russian" value="俄语">
                            <label for="lang_russian">俄语</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="lang_arabic" value="阿拉伯语">
                            <label for="lang_arabic">阿拉伯语</label>
                        </div>
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary">保存个人信息</button>
                <span id="saveStatus"></span>
            </form>
            
            <div id="saveResult" class="result-area" style="display: none;">
                <div class="result-title">保存结果</div>
                <div id="saveContent" class="result-content"></div>
            </div>
        </div>

        <!-- 根据手机号查询测试 -->
        <div class="test-section">
            <div class="test-title">🔍 根据手机号查询测试</div>
            <div class="form-group">
                <label for="queryPhone">手机号：</label>
                <input type="tel" id="queryPhone" placeholder="输入手机号查询个人信息" maxlength="11">
            </div>
            <button class="btn btn-primary" onclick="queryPersonalInfo()">查询个人信息</button>
            <span id="queryStatus"></span>
            <div id="queryResult" class="result-area" style="display: none;">
                <div class="result-title">查询结果</div>
                <div id="queryContent" class="result-content"></div>
            </div>
        </div>

        <!-- 快速填充测试 -->
        <div class="test-section">
            <div class="test-title">🚀 快速填充测试</div>
            <div class="form-group">
                <label for="fillPhone">手机号：</label>
                <input type="tel" id="fillPhone" placeholder="输入手机号快速填充表单" maxlength="11">
            </div>
            <button class="btn btn-primary" onclick="quickFillForm()">快速填充表单</button>
            <span id="fillStatus"></span>
            <div id="fillResult" class="result-area" style="display: none;">
                <div class="result-title">填充结果</div>
                <div id="fillContent" class="result-content"></div>
            </div>
        </div>
    </div>

    <script>
        // API基础配置
        const API_BASE_URL = 'http://localhost:8089';
        
        // 生成测试用的userToken
        function generateTestUserToken() {
            const timestamp = Date.now();
            const random = Math.random().toString(36).substr(2, 9);
            return `test_user_${timestamp}_${random}`;
        }
        
        const testUserToken = generateTestUserToken();
        console.log('测试用户Token:', testUserToken);

        // 通用请求函数
        async function makeRequest(url, options = {}) {
            try {
                const response = await fetch(url, {
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    ...options
                });
                
                const data = await response.json();
                return { success: true, data, status: response.status };
            } catch (error) {
                return { success: false, error: error.message };
            }
        }

        // 设置状态显示
        function setStatus(elementId, type, message) {
            const element = document.getElementById(elementId);
            element.className = `status ${type}`;
            element.textContent = message;
        }

        // 显示结果
        function showResult(resultId, contentId, data) {
            document.getElementById(resultId).style.display = 'block';
            document.getElementById(contentId).textContent = JSON.stringify(data, null, 2);
        }

        // 测试服务器连接
        async function testConnection() {
            setStatus('connectionStatus', 'loading', '连接中...');
            
            const result = await makeRequest(`${API_BASE_URL}/personalInfo/check-phone?phone=13800000000`);
            
            if (result.success) {
                setStatus('connectionStatus', 'success', '连接成功');
                showResult('connectionResult', 'connectionContent', {
                    status: '连接成功',
                    server: API_BASE_URL,
                    response: result.data
                });
            } else {
                setStatus('connectionStatus', 'error', '连接失败');
                showResult('connectionResult', 'connectionContent', {
                    status: '连接失败',
                    error: result.error
                });
            }
        }

        // 检查手机号
        async function checkPhone() {
            const phone = document.getElementById('phoneCheck').value.trim();
            if (!phone) {
                alert('请输入手机号');
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入正确的手机号格式');
                return;
            }
            
            setStatus('phoneCheckStatus', 'loading', '检查中...');
            
            const result = await makeRequest(`${API_BASE_URL}/personalInfo/check-phone?phone=${phone}`);
            
            if (result.success && result.data.code === 200) {
                const exists = result.data.data;
                setStatus('phoneCheckStatus', exists ? 'error' : 'success', 
                         exists ? '手机号已存在' : '手机号可用');
                showResult('phoneCheckResult', 'phoneCheckContent', result.data);
            } else {
                setStatus('phoneCheckStatus', 'error', '检查失败');
                showResult('phoneCheckResult', 'phoneCheckContent', result);
            }
        }

        // 获取选中的语种
        function getSelectedLanguages() {
            const checkboxes = document.querySelectorAll('#languagesGroup input[type="checkbox"]:checked');
            return Array.from(checkboxes).map(cb => cb.value);
        }

        // 保存个人信息
        async function savePersonalInfo(event) {
            event.preventDefault();
            
            const formData = {
                userToken: testUserToken,
                name: document.getElementById('name').value.trim(),
                phone: document.getElementById('phone').value.trim(),
                gender: document.getElementById('gender').value,
                age: parseInt(document.getElementById('age').value),
                education: document.getElementById('education').value,
                occupation: document.getElementById('occupation').value.trim(),
                religion: document.getElementById('religion').value || '无',
                languages: JSON.stringify(getSelectedLanguages()),
                isDefault: true
            };
            
            setStatus('saveStatus', 'loading', '保存中...');
            
            const result = await makeRequest(`${API_BASE_URL}/personalInfo/save`, {
                method: 'POST',
                body: JSON.stringify(formData)
            });
            
            if (result.success && result.data.code === 200) {
                setStatus('saveStatus', 'success', '保存成功');
                showResult('saveResult', 'saveContent', result.data);
            } else {
                setStatus('saveStatus', 'error', '保存失败');
                showResult('saveResult', 'saveContent', result);
            }
        }

        // 查询个人信息
        async function queryPersonalInfo() {
            const phone = document.getElementById('queryPhone').value.trim();
            if (!phone) {
                alert('请输入手机号');
                return;
            }
            
            setStatus('queryStatus', 'loading', '查询中...');
            
            const result = await makeRequest(`${API_BASE_URL}/personalInfo/by-phone/${phone}`);
            
            if (result.success && result.data.code === 200) {
                setStatus('queryStatus', 'success', '查询成功');
                showResult('queryResult', 'queryContent', result.data);
            } else {
                setStatus('queryStatus', 'error', '查询失败');
                showResult('queryResult', 'queryContent', result);
            }
        }

        // 快速填充表单
        async function quickFillForm() {
            const phone = document.getElementById('fillPhone').value.trim();
            if (!phone) {
                alert('请输入手机号');
                return;
            }
            
            setStatus('fillStatus', 'loading', '填充中...');
            
            const result = await makeRequest(`${API_BASE_URL}/personalInfo/by-phone/${phone}`);
            
            if (result.success && result.data.code === 200) {
                const personalInfo = result.data.data;
                
                // 填充表单
                document.getElementById('name').value = personalInfo.name || '';
                document.getElementById('phone').value = personalInfo.phone || '';
                document.getElementById('gender').value = personalInfo.gender || '';
                document.getElementById('age').value = personalInfo.age || '';
                document.getElementById('education').value = personalInfo.education || '';
                document.getElementById('occupation').value = personalInfo.occupation || '';
                document.getElementById('religion').value = personalInfo.religion || '无';
                
                // 填充语种选择
                if (personalInfo.languages) {
                    const languages = JSON.parse(personalInfo.languages);
                    document.querySelectorAll('#languagesGroup input[type="checkbox"]').forEach(cb => {
                        cb.checked = languages.includes(cb.value);
                    });
                }
                
                setStatus('fillStatus', 'success', '填充成功');
                showResult('fillResult', 'fillContent', {
                    status: '表单填充成功',
                    data: personalInfo
                });
            } else {
                setStatus('fillStatus', 'error', '填充失败');
                showResult('fillResult', 'fillContent', result);
            }
        }

        // 页面加载时的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🎯 个人信息功能测试页面加载完成');
            console.log('测试用户Token:', testUserToken);
            console.log('API地址:', API_BASE_URL);
            
            // 自动测试连接
            setTimeout(testConnection, 1000);
        });
    </script>
</body>
</html> 